<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
<link href="/skin/font/iconfont.css" rel="stylesheet" type="text/css" />
<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
<script src="/user/js/jquery.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>邀请中心-会员中心</title>
<style>
/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
body { background: #f5f7fb;padding-bottom: 0; }
a{-webkit-tap-highlight-color:transparent;outline:none;}

.invitation-center-body{
	padding:0;
}
.invitation-center-header{
	background: none!important;
}
.head-b .back img,
.head-b .hSearch img{
	filter: invert(0) brightness(0.15);
}
/* 顶部背景区域 */
.invite-header {
	position: relative;
	background: url('/skin/img/share_center_background.png') center/cover no-repeat;
	padding: 0.2rem 0.2rem 0.3rem;
}
h1#t0{
	color: #131924;
}

/* 二维码按钮 - 右上角 */
.qr-code-btn {
	position: absolute;
	top: 0.6rem;
	right: 0.16rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.04rem;
	padding: 0.08rem 0.12rem;
	border-radius: 0.08rem;
	text-decoration: none;
}
.qr-code-btn img {
	width: 0.38rem;
	height: 0.38rem;
}
.qr-code-btn span {
	font-size: 0.11rem;
	color: #1e293b;
	font-weight: 500;
}

/* 用户头像 - 居中 */
.user-avatar-section {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.15rem;
}
.user-avatar {
	width: 0.72rem;
	height: 0.72rem;
	border-radius: 50%;
	overflow: hidden;
	border: 0.03rem solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.15);
}
.user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 统计卡片 - 深色 */
.stats-card-wrapper {
	padding: 0 0.16rem;
	margin-top: -0.24rem;
	position: relative;
	z-index: 2;
}
.stats-card {
	background: linear-gradient(135deg, #31374C 0%, #31374C 100%);
    border-radius: 0.04rem;
	padding: 0.14rem 0;
	box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.stats-items {
	display: flex;
	flex: 1;
	justify-content: space-between;
}
.stat-item,
.stat-item-link {
	width: 25%;
	text-align: center;
	color: #fff;
	display: block;
	text-decoration: none;
	align-items: center;
    display: flex;
    justify-content: center;
	flex-direction: column;
}
.stat-item-link {
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	transition: opacity 0.2s;
}
.stat-item-link:active {
	opacity: 0.8;
}
.stat-value {
	font-size: 0.16rem;
	font-weight: 700;
	margin-bottom: 0.06rem;
	color: #fff;
}
.stat-label {
	font-size: 0.12rem;
	color: rgba(255, 255, 255, 0.85);
}
.withdraw-btn {
    background: white;
    color: #2A3139;
    padding: 0.04rem 0.14rem;
    border-radius: 0.11rem;
    font-size: 0.12rem;
    white-space: nowrap;
    text-decoration: none;
}

/* 标签页 */
.tabs-wrapper {
	margin: 0.16rem 0.2rem 0;
}
.tabs {
	display: flex;
	padding: 0 0.2rem;
	border-bottom: 0.01rem solid #f1f5f9;
}
.tab-item {
	flex: 1;
	text-align: center;
	padding: 0.07rem 0;
	font-size: 0.15rem;
	color: #94a3b8;
	position: relative;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 400;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}
.tab-item.active {
	color: #345643;
	font-weight: 600;
}
.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -0.01rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.32rem;
	height: 0.03rem;
	background: #345643;
	border-radius: 0.02rem;
}

/* 内容区域 */
.tab-content {
	margin: 0.2rem .16rem;
}
.tab-panel {
	display: none;
}
.tab-panel.active {
	display: block;
}

/* 交易列表 */
.transaction-list {
}
.transaction-item {
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.14rem 0.2rem;
    border-bottom: 0.01rem solid #f1f5f9;
    background: white;
    margin-bottom: .12rem;
    border-radius: 0.04rem;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.transaction-item:last-child {
	border-bottom: none;
}
.transaction-left {
    flex: 1;
}
.transaction-amount {
    font-size: 0.17rem;
    font-weight: 700;
    margin-bottom: 0.06rem;
    color: #1e293b;
}
.transaction-amount.positive {
	color: #16a34a;
}
.transaction-amount.negative {
	color: #ef4444;
}
.transaction-time {
	font-size: 0.12rem;
	color: #94a3b8;
}
.transaction-type {
    font-size: 0.12rem;
    color: #64748b;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    align-items: flex-end;
}
.transaction-type-text {
	font-weight: 400;
    color: #2A3139;
    font-size: .12rem;
}
.transaction-type-sub {
    font-size: 0.11rem;
    color: #94a3b8;
}

.empty-state {
	text-align: center;
	padding: 0.8rem 0;
	color: #94a3b8;
	font-size: 0.14rem;
}

/* 邀请记录特殊样式 */
.invitation-name {
	font-size: 0.15rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 0.04rem;
}
.invitation-performance {
	font-size: 0.12rem;
	color: #64748b;
}
.invitation-level {
	font-size: 0.13rem;
	color: #3b5167;
	font-weight: 600;
}
</style>
</head>
<body class="cart invitation-center-body">
<header id="header" class="invitation-center-header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"></a></span>
		<h1 id="t0">邀请中心</h1>
		<!-- <div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"></a>
		</div> -->
	</section>
</header>

<!-- 顶部背景区域 -->
<div class="invite-header">
	<!-- 二维码按钮 - 右上角 -->
	<!-- <a href="/user/erweima/share.php" class="qr-code-btn">
		<img src="/skin/img/code.png" alt="二维码" />
		<span>邀请码</span>
	</a> -->
	
	<!-- 用户头像 - 居中 -->
	<div class="user-avatar-section">
		<div class="user-avatar">
			<img src="/skin/img/tx.png" alt="头像" />
		</div>
	</div>
</div>

<!-- 统计卡片 -->
<div class="stats-card-wrapper">
	<div class="stats-card">
		<div class="stats-items">
			<div class="stat-item">
				<div class="stat-value">{$team_count}</div>
				<div class="stat-label">团队成员</div>
			</div>
			<div class="stat-item">
				<div class="stat-value">{$balance_display}</div>
				<div class="stat-label">我的余额</div>
			</div>
			<a href="cashrecord.php" class="stat-item stat-item-link">
				<div class="stat-value">{$total_earnings}</div>
				<div class="stat-label">累计收益</div>
			</a>
			<div class="stat-item">
				<a href="withdrawal.php?type=1" class="withdraw-btn">提现</a>
			</div>
		</div>
	</div>
</div>

<!-- 标签页 -->
<div class="tabs-wrapper">
	<div class="tabs">
		<div class="tab-item active" data-tab="transactions">流水明细</div>
		<div class="tab-item" data-tab="invitations">邀请记录</div>
		<a class="tab-item" href="/user/erweima/share.php">邀请码</a>
	</div>
</div>

<!-- 内容区域 -->
<div class="tab-content">
    <!-- 流水明细 -->
    <div class="tab-panel active" id="transactions">
        <div class="transaction-list">
            {if($transaction_list)}
            {loop $transaction_list $tk as $item}
            <div class="transaction-item">
                <div class="transaction-left">
                    <div class="transaction-amount {$item[amount_class]}">
                        {$item[sign]}{$item[amount]}
                    </div>
                    <div class="transaction-time">{$item[time]}</div>
                </div>
                <div class="transaction-type">
                    <div class="transaction-type-text">{$item[label]}</div>
                </div>
            </div>
            {/loop}
            {else}
            <div class="empty-state">暂无流水记录</div>
            {/if}
        </div>
	</div>
	
	<!-- 邀请记录 -->
	<div class="tab-panel" id="invitations">
		<div class="transaction-list">
			{loop $invitation_list $key as $list}
			<div class="transaction-item">
				<div class="transaction-left">
					<div class="invitation-name">
						{$list[uname]}({$list[tname]})
					</div>
					<div class="invitation-performance">
						个人业绩: {$list[selforder]} | 团队业绩: {$list[teamorder]}
					</div>
				</div>
				<div class="invitation-level">
					{if($info[tlevel]>0)}
					{$tdarr1[$list[tlevel]]}
					{else}
					{$tdarr[$list[level]]}
					{/if}
				</div>
			</div>
			{/loop}
		</div>
	</div>
</div>

<script>
// 标签页切换
$(function() {
	$('.tab-item').click(function() {
		var tab = $(this).data('tab');
		if(!tab){
			return;
		}
		$('.tab-item').removeClass('active');
		$(this).addClass('active');
		$('.tab-panel').removeClass('active');
		$('#' + tab).addClass('active');
	});
});

// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
(function(){
	var docEl = document.documentElement;
	var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
	function recalc() {
		var clientWidth = docEl.clientWidth;
		if (!clientWidth) return;
		docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
	}
	if (!document.addEventListener) return;
	window.addEventListener(resizeEvt, recalc, false);
	document.addEventListener('DOMContentLoaded', recalc, false);
	recalc();
})();
</script>
</body>
</html>
